<template>
	<div id='login'>
		<template v-if="true">
			<header class="header">
				<img src="../assets/logo.png" alt="" />
			</header>
			<div class="content">
				<div class="list_title">手机号码&nbsp;<span>(代理请使用认证手机号登录)</span></div>
				<div class="list list_icon">
					<input 
						class="custom"
						type="number" 
						pattern="\d*"  
						v-model.number="phoneNum" 
						placeholder="请输入11位手机号码" 
						@blur="blurInputReg(phoneNum,'phone')"
						@focus='focusInput(phoneNum,"phone")'
						@input='changeInput(phoneNum,"phone")'
						oninput="if(value.length>11)value=value.slice(0,11)"
					/>
					<img @click.stop="phoneNum=''" v-show='closeImg' class="img_icon" src="../assets/close.png" alt="" />
				</div>
				<div class="list_title" style="margin-top: .6rem;">验证码</span></div>
				<div class="list list_code">
					<div class="list_icon">
						<input
							@blur="blurInputReg(verifyCode)"
							@focus='focusInput(verifyCode)'
							@input='changeInput(verifyCode)'
							v-model.trim="verifyCode" 
							class="custom" 
							maxlength="12" 
							pattern="\d*" 
							placeholder="请输入4位验证码" 
							type="number" 
							oninput="if(value.length>4)value=value.slice(0,4)"
						/>
						<img @click="verifyCode=''" v-show='closeImgCode' class="img_icon" src="../assets/close.png" alt="" />
					</div>
					<div class="c_size_34_48 list_code_c">
						<yd-sendcode
								:class='redBtn?"send_btn_red":""'
								class='send_btn'
					            v-model="startTime"
					            storage-key="dashuaibi"
					            @click.native="sendMsg"
					            size="large"
					            type="danger"
					            second="60"
					            :init-str="initStr"
					            run-str="{%s} 秒"
					            reset-str="重新发送"
					    ></yd-sendcode>
					</div>
				</div>
				<div class="login_btn" @click="loginBtn">登录</div>
			</div>
		</template>
	</div>
</template>

<script>
	import {SendCode} from 'vue-ydui/dist/lib.rem/sendcode';
	export default{
		components:{
			[SendCode.name]:SendCode
		},
		data(){
			return {
				showMsg:false,
				phoneNum:'',
				startTime:false,
				verifyCode:'',
				phoneFlg:false,
				erroMsg:'请输入11位手机号码',
				redBtn:false,
				initStr:'获取验证码',
				closeImg:false,
				closeImgCode:false,
			}
		},
		created() {
//			if(sessionStorage.getItem('wst_xiruixy_userInfo')&&sessionStorage.getItem('wst_xiruixy_userInfo')!='{}'){
//				this.$router.go(-1)
//				return
//			}
			sessionStorage.setItem('wst_xiruixy_userInfo','')
			
			var params={code:this.$root.config.code}
			if(this.$root.config.channel){
				params.channel=this.$root.config.channel
			}
			return 
			this.$root.ajax({
				name:'wx/login',
				params:params,
				errormsg:true,
				loadingName:'登录中，请稍后...',
				noCatch:true,
			}).then((d)=>{
				console.log(d)
				console.log('oldUrlStr',this.$root.config)
				if(d.code==0){
					this.$root.userInfo=d.data ;
					sessionStorage.setItem('wst_xiruixy_userInfo',JSON.stringify(d.data));
					let urlName = 'index'
					if(this.$root.config.oldUrlStr){
						urlName=this.$root.config.oldUrlStr!='login'?this.$root.config.oldUrlStr:'index'
					}
					let query={}, countNum = 1;
					//对参数进行整理
					if(this.$root.config.keyNum&&this.$root.config.keyNum>=1){
						for(let key in this.$root.config){
							if(key==('paramsVal'+countNum)){
								query[this.$root.config['paramsKey'+countNum]] = this.$root.config['paramsVal'+countNum]
								if(countNum==this.$root.config.keyNum){
									break	
								}
								countNum ++
							}
						}
					}
					this.$router.push({
						name:urlName,
						query:query
					})
				}else{
					this.showMsg=true;
				}
			})
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			document.title='登录'
		},
		methods:{
			//登录
			loginBtn(){
				if(!this.phoneFlg){
					this.$dialog.toast({
		                mes: this.erroMsg,
		                timeout: 2000
		           	});
				}else if((this.verifyCode+'').length!=4){
					this.$dialog.toast({
		                mes: '请输入4位的短信验证码',
		                timeout: 2000
		           	});
				}else{
					this.$root.ajax({
						name:'login/login',
						noToken:true,
						params:{
							mobile:this.phoneNum,
							verify_code:(this.verifyCode+''),
						}
					}).then((d)=>{
						var o ={}
						o.token=d.data.token
						o.me=d.data.me
						this.$root.userInfo=o
						localStorage.setItem('wst_xiruixy_time',(new Date().getTime()))
						sessionStorage.setItem('wst_xiruixy_userInfo',JSON.stringify(o))
						localStorage.setItem('wst_xiruixy_userInfo',JSON.stringify(o))
						if(this.$route.query.historyUrl=='set'){
							
							this.$router.push({
								name:'index',
								query:{
									str:'index'
								}
							})
							
						}else{
							let urlName = 'index'
							if(this.$root.config.oldUrlStr){
								urlName=this.$root.config.oldUrlStr!='login'?this.$root.config.oldUrlStr:'index'
							}
							let query={}, countNum = 1;
							//对参数进行整理
							if(this.$root.config.keyNum&&this.$root.config.keyNum>=1){
								for(let key in this.$root.config){
									if(key==('paramsVal'+countNum)){
										query[this.$root.config['paramsKey'+countNum]] = this.$root.config['paramsVal'+countNum]
										if(countNum==this.$root.config.keyNum){
											break	
										}
										countNum ++
									}
								}
							}
							this.$router.push({
								name:urlName,
								query:query
							})
						}
						
					})
				}
				
			},
			sendMsg(){
				
				if(this.phoneFlg){
					this.initStr='重新发送'
					this.startTime = true
					this.$root.ajax({
						name:'login/verify',
						loadingName:'发送中，请稍后...',
						params:{
							mobile:this.phoneNum
						}
					}).then((d)=>{
						this.$dialog.toast({
			                mes: `验证码发送成功`,
			                timeout: 2000
			           	});
					})
				}else{
					this.$dialog.toast({
		                mes: this.erroMsg,
		                timeout: 2000
		           	});
				}
					
			},
			changeInput(val,str){
				if(str=='phone'){
					if(val||val===0){
						var phoneReg = /^1[3456789]\d{9}$/ ;
						if(phoneReg.test(val)) {
							this.redBtn=true;
						}else{
							this.redBtn=false;
						}
						this.closeImg=true;
					}else{
						this.closeImg=false;
					}
				}else{
					if(val||val===0){
						this.closeImgCode=true;
					}else{
						this.closeImgCode=false;
					}
				}
					
			},
			focusInput(val,str){
				if(str=='phone'){
					if(val||val===0){
						this.closeImg=true;
					}
				}else{
					if(val||val===0){
						this.closeImgCode=true;
					}
				}
					
			},
			blurInputReg(val,str){
				if(str=='phone'){
					setTimeout(()=>{
						this.closeImg=false;
					},100)
					
					if(val||val===0){
						var phoneReg = /^1[3456789]\d{9}$/ ;
						if(phoneReg.test(val)) {
							this.phoneFlg=true
							this.redBtn=true;
							return
						} else {
							this.erroMsg='手机号格式不正确'
	//						this.$dialog.toast({
	//			                mes: `手机号格式不正确`,
	//			                timeout: 2000
	//			           	});
						}
					}else{
						this.erroMsg='请输入11位手机号码'
	//					this.$dialog.toast({
	//		                mes: `请输入11位手机号码`,
	//		                timeout: 2000
	//		           	});
					}
					this.phoneFlg=false
				}else{
					setTimeout(()=>{
						this.closeImgCode=false;
					},100)
				}
					
			}
		}
	}
</script>

<style lang="scss">
@import './login.scss';
#login{
	/*span{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: .4rem;
        font-weight: bold;
        color: #999999;
	}*/
}
</style>